<template>
	<view class="content">
		<image class="banner-image" src="../../static/images/index/yuyue.png"></image>
		<view>
			<view class="list-from">
				<view class="text">楼盘名称</view>
				<input class="input" focus placeholder="楼盘名称"/>
			</view>
			<view class="list-from">
				<view class="text">预约类型</view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="input">{{array[index]}}</view>
					<view class="input-fh"></view>
				</picker>
			</view>
			<view class="list-from">
				<view class="text2">门 户</view>
				<input class="input" focus placeholder="门户"/>
			</view>
			<view class="list-from">
				<view class="text2">姓 名</view>
				<input class="input" focus placeholder="姓名"/>
			</view>
			<view class="list-from">
				<view class="text">联系方式</view>
				<input class="input" focus placeholder="联系方式"/>
			</view>
			<view class="list-from">
				<view class="text">微信号码</view>
				<input class="input" focus placeholder="微信号"/>
			</view>
			<button class="button"><view class="text-button">确定预约</view></button>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        const currentDate = this.getDate({
	            format: true
	        })
	        return {
	            title: 'picker',
	            array: ['验房', '微改报价', '设计', '领包入住'],
	            index: 0,
	        }
	    },
	    computed: {
	        
	    },
	    methods: {
	        bindPickerChange: function(e) {
	            console.log('picker发送选择改变，携带值为', e.detail.value)
	            this.index = e.detail.value
	        },
			getDate(type) {
			            
			        }
	    }
	}
</script>

<style>
	* {
		margin: 0 auto;
		padding: 0 0;
	}
	
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		box-sizing: border-box; //盒子模型
	}
	.banner-swiper {
		width: 100%;
		height: 450rpx;
	}
	
	.banner-image {
		width: 100%;
		height: 450rpx;
	}
	.list-from{
		text-align: center;
		box-sizing: border-box;
		padding: 40rpx 72rpx 0rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.input{
		width: 486rpx;
		height: 60rpx;
		background: #ffffff;
		border: 2rpx solid rgba(0,0,0,0.10);
		border-radius: 8rpx
	}
	.input-fh{
		
	}
	.text{
		font-size: 28rpx;
		font-weight: 500;
		text-align: CENTER;
		color: #666666;
		line-height: 28rpx;
	}
	.text2{
		font-size: 28rpx;
		font-weight: 500;
		text-align: CENTER;
		color: #666666;
		line-height: 28rpx;
		letter-spacing: 18rpx;
	}
	.button{
		margin-top: 100rpx;
		width: 328rpx;
		height: 80rpx;
		background: #3d9c36;
		border-radius: 8rpx;
	}
	.text-button{
		color: #ffffff;
	}
</style>